<template>
  <view class="login-container">
    <!-- 装饰元素：云朵 -->
    <view class="cloud cloud-1"></view>
    <view class="cloud cloud-2"></view>
    <view class="cloud cloud-3"></view>
    
    <!-- 装饰元素：山脉 -->
    <view class="mountain"></view>
    
    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- 应用Logo和标题 -->
      <view class="app-header">
        <view class="app-logo">
          <uni-icons type="location" size="45" color="#ffffff"></uni-icons>
        </view>
        <text class="app-title">景点旅游助手</text>
        <text class="app-subtitle">探索世界，轻松旅行</text>
      </view>
      
      <!-- 登录表单 -->
      <view class="form-container">
        <!-- 用户名输入框 -->
        <input 
          class="form-input" 
          type="text" 
          placeholder="请输入用户名" 
          v-model="form.username"
          :disabled="loading"
          @focus="resetFieldError('username')"
        />
        <text class="error-message" v-if="errors.username">{{ errors.username }}</text>
        
        <!-- 密码输入框 -->
        <input 
          class="form-input" 
          type="password" 
          placeholder="请输入密码" 
          v-model="form.password"
          :disabled="loading"
          @focus="resetFieldError('password')"
        />
        <text class="error-message" v-if="errors.password">{{ errors.password }}</text>
        
        <!-- 记住我和忘记密码 -->
        <view class="remember-forgot">
          <checkbox color="#3498db" :disabled="loading">记住我</checkbox>
          <text class="forgot-password" @tap="goToForgotPassword">忘记密码?</text>
        </view>
        
        <!-- 登录按钮 -->
        <button 
          class="login-btn" 
          @tap="handleLogin"
          :disabled="loading"
          :loading="loading"
        >
          {{ loading ? '登录中...' : '登录' }}
        </button>
      </view>
      
      <!-- 社交登录 -->
      <view class="social-login">
        <view class="social-title">其他方式登录</view>
        <view class="social-icons">
          <view class="social-icon qq" @tap="loginWithQQ">
            <uni-icons type="qq" size="24" color="#ffffff" />
          </view>
          <view class="social-icon weibo" @tap="loginWithWeibo">
            <uni-icons type="weibo" size="24" color="#ffffff" />
          </view>
          <view class="social-icon wechat" @tap="loginWithWechat">
            <uni-icons type="weixin" size="24" color="#ffffff" />
          </view>
        </view>
      </view>
      
      <!-- 注册链接 -->
      <view class="register-link">
        <text class="register-text">还没有账号? </text>
        <text class="register-btn" @tap="goToRegister">立即注册</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  username: '',
  password: ''
})

const errors = ref({
  username: '',
  password: ''
})

const loading = ref(false)

const validateForm = () => {
  let isValid = true
  
  if (!form.value.username.trim()) {
    errors.value.username = '请输入用户名'
    isValid = false
  } else if (form.value.username.length < 4) {
    errors.value.username = '用户名至少4个字符'
    isValid = false
  }
  
  if (!form.value.password) {
    errors.value.password = '请输入密码'
    isValid = false
  } else if (form.value.password.length < 6) {
    errors.value.password = '密码至少6个字符'
    isValid = false
  }
  
  return isValid
}

const resetFieldError = (field) => {
  errors.value[field] = ''
}

const handleLogin = async () => {
  if (!validateForm()) return
  
  loading.value = true
  
  try {
    const res = await new Promise((resolve, reject) => {
      uni.request({
        url: 'http://192.168.165.171:8080/api/users/login',
        method: 'POST',
        data: {
          username: form.value.username,
          password: form.value.password
        },
        header: {
          'Content-Type': 'application/json'
        },
        success: (res) => resolve(res),
        fail: (err) => reject(err)
      })
    })

    // 处理响应数据
    if (res.statusCode === 200) {
      if (res.data && res.data.token) {
        uni.setStorageSync('token', res.data.token)
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        setTimeout(() => {
          // 使用 uni.navigateTo 跳转到 home 页面
          uni.navigateTo({
            url: '/pages/home/home'
          })
        }, 1500)
      } else {
        throw new Error('登录成功但未返回token')
      }
    } else {
      let errorMsg = '登录失败'
      if (res.statusCode === 401) {
        errorMsg = '用户名或密码错误'
      } else if (res.statusCode === 400) {
        errorMsg = '请求参数错误'
      } else if (res.statusCode >= 500) {
        errorMsg = '服务器错误，请稍后再试'
      }
      
      if (res.data && res.data.message) {
        errorMsg = res.data.message
      }
      
      throw new Error(errorMsg)
    }
  } catch (error) {
    console.error('登录错误:', error)
    uni.showToast({
      title: error.message || '登录失败',
      icon: 'none',
      duration: 2000
    })
  } finally {
    loading.value = false
  }
}
	

const loginWithQQ = () => {
  uni.showToast({
    title: 'QQ登录开发中',
    icon: 'none'
  })
}

const loginWithWeibo = () => {
  uni.showToast({
    title: '微博登录开发中',
    icon: 'none'
  })
}

const loginWithWechat = () => {
  uni.showToast({
    title: '微信登录开发中',
    icon: 'none'
  })
}

const goToForgotPassword = () => {
  uni.navigateTo({
    url: '/pages/forgot-password/forgot-password'
  })
}

const goToRegister = () => {
  uni.navigateTo({
    url: '/pages/register/register'
  })
}
</script>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #3498db, #2ecc71);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* 装饰元素 - 云朵 */
.cloud {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.6;
  z-index: 0;
}

.cloud-1 {
  width: 120rpx;
  height: 40rpx;
  top: 8%;
  left: 5%;
  animation: float 25s infinite linear;
}

.cloud-2 {
  width: 150rpx;
  height: 50rpx;
  top: 20%;
  right: 8%;
  animation: float 30s infinite linear reverse;
}

.cloud-3 {
  width: 100rpx;
  height: 35rpx;
  bottom: 30%;
  left: 15%;
  animation: float 20s infinite linear;
}

/* 装饰元素 - 山峰 */
.mountain {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150rpx;
  background: linear-gradient(to top, rgba(52, 152, 219, 0.6), rgba(46, 204, 113, 0.4));
  z-index: 1;
}

/* 登录卡片 */
.login-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 650rpx;
  max-height: 90vh;
  padding: 40rpx 35rpx 30rpx;
  z-index: 10;
  position: relative;
  overflow-y: auto;
  backdrop-filter: blur(10rpx);
  box-sizing: border-box;
}

/* 应用Logo和标题 */
.app-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.app-logo {
  width: 90rpx;
  height: 90rpx;
  background: linear-gradient(135deg, #3498db, #2ecc71);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.app-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8rpx;
  display: block;
}

.app-subtitle {
  font-size: 24rpx;
  color: #7f8c8d;
  letter-spacing: 1rpx;
}

/* 表单容器 */
.form-container {
  margin-bottom: 30rpx;
}

/* 输入框样式 */
.form-input {
  width: 100%;
  height: 75rpx;
  border: 2rpx solid #e0e7ff;
  border-radius: 15rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  background-color: #f8f9ff;
  margin-bottom: 10rpx;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 4rpx rgba(52, 152, 219, 0.2);
}

/* 错误信息 */
.error-message {
  color: #e74c3c;
  font-size: 22rpx;
  margin-bottom: 20rpx;
  display: block;
  height: 30rpx;
}

/* 记住我和忘记密码 */
.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 22rpx;
}

.forgot-password {
  color: #3498db;
  font-weight: 500;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  padding: 22rpx;
  background: linear-gradient(135deg, #3498db, #2ecc71);
  color: white;
  border: none;
  border-radius: 15rpx;
  font-size: 28rpx;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8rpx 20rpx rgba(52, 152, 219, 0.4);
  margin-bottom: 30rpx;
  transition: all 0.3s;
  height: 75rpx;
}

.login-btn:active:not([disabled]) {
  transform: translateY(-2rpx);
  box-shadow: 0 12rpx 25rpx rgba(52, 152, 219, 0.6);
}

.login-btn[disabled] {
  opacity: 0.7;
  background: linear-gradient(135deg, #95a5a6, #bdc3c7);
}

/* 社交登录 */
.social-login {
  text-align: center;
  margin-bottom: 25rpx;
}

.social-title {
  color: #7f8c8d;
  font-size: 22rpx;
  margin-bottom: 15rpx;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 25rpx;
  margin-top: 20rpx;
}

.social-icon {
  width: 65rpx;
  height: 65rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.1);
}

.social-icon:active {
  transform: translateY(-3rpx);
}

.qq {
  background: #0089f9;
}

.weibo {
  background: #e6162d;
}

.wechat {
  background: #09bb07;
}

/* 注册链接 */
.register-link {
  text-align: center;
  font-size: 24rpx;
}

.register-text {
  color: #7f8c8d;
}

.register-btn {
  color: #3498db;
  font-weight: 600;
  margin-left: 8rpx;
}

/* 动画效果 */
@keyframes float {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(calc(100vw + 100%));
  }
}

/* 响应式适配 */
@media screen and (max-height: 1200rpx) {
  .login-card {
    max-height: 95vh;
    padding: 30rpx 30rpx 25rpx;
  }
  
  .app-header {
    margin-bottom: 30rpx;
  }
  
  .app-logo {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
  }
  
  .app-title {
    font-size: 36rpx;
  }
}
</style>